<template>
  <div class="page-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>业务管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主内容区域 -->
    <div class="page-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-wrapper">
        <el-skeleton :rows="8" animated />
      </div>

      <!-- 数据内容 -->
      <div v-else-if="objlist.hlist && objlist.hlist.length > 0">
        <!-- 详情信息卡片 - 完全按照uniapp的hlist渲染 -->
        <el-card class="detail-card" :style="{order: objlist.orderlist && objlist.orderlist[0]}">
          <template #header>
            <div class="card-header">
              <span class="card-title">基本信息</span>
            </div>
          </template>
          
          <div class="detail-table">
            <div v-for="(item, index) in objlist.hlist" :key="index" class="detail-row">
              <div class="detail-label">{{ item.biaoti }}</div>
              <div class="detail-content">
                {{ item.neirong }}
                <div v-if="item.shouji || item.dizhi" class="action-buttons">
                  <el-button v-if="item.shouji" type="text" size="small" @click="makephone(item.shouji)">
                    <el-icon><Phone /></el-icon>
                    拨号
                  </el-button>
                  <el-button v-if="item.dizhi" type="text" size="small" @click="handleCopy(item.dizhi)">
                    <el-icon><CopyDocument /></el-icon>
                    复制
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 子设备列表区域 -->
        <el-card v-if="objlist.zib_zd_list && objlist.zib_zd_list.faid > 0" 
                 class="detail-card" 
                 :style="{order: objlist.orderlist && objlist.orderlist[1]}">
          <template #header>
            <div class="card-header">
              <span class="card-title">{{ objlist.zib_zd_list.biaoti }}（{{ objlist.zib_zd_list.jllist?.length || 0 }}）</span>
            </div>
          </template>
          
          <div class="device-list">
            <el-card 
              v-for="(it, index) in objlist.zib_zd_list.jllist" 
              :key="index" 
              class="device-item"
              :class="it.hang_class"
              shadow="hover"
              @click="toUrl_xq(it)"
            >
              <div class="device-title">{{ it.dbiaoti }}</div>
              <div class="device-info">
                <div v-for="(items, ind) in it.hlist" :key="ind" class="info-item">
                  {{ items.neirong }}
                </div>
              </div>
            </el-card>
          </div>
        </el-card>

        <!-- Tab列表区域 -->
        <div class="tab-section" :style="{order: objlist.orderlist && objlist.orderlist[2]}">
          <el-card 
            v-for="(it, index) in objlist.zib_tab_list" 
            :key="index" 
            class="detail-card"
          >
            <template #header>
              <div class="card-header">
                <span class="card-title">{{ it.biaoti }}（{{ it.count }}）</span>
              </div>
            </template>
            
            <div class="tab-list">
              <el-card 
                v-for="(item, idx) in it.jllist" 
                :key="idx" 
                class="tab-item"
                shadow="hover"
                @click="toUrl_xq(item)"
              >
                <div class="tab-title">{{ item.dbiaoti }}</div>
                <div class="tab-info">
                  <div v-for="(items, ind) in item.hlist" :key="ind" class="info-item">
                    {{ items.neirong }}
                  </div>
                </div>
              </el-card>
            </div>
          </el-card>
        </div>

        <!-- 图片上传区域 - 对应uniapp的upload组件 -->
        <el-card v-if="objlist.imgs || objlist.obj" class="detail-card" :style="{order: objlist.orderlist && objlist.orderlist[3]}">
          <template #header>
            <div class="card-header">
              <span class="card-title">相关附件</span>
            </div>
          </template>
          
          <div class="upload-section">
            <el-upload
              v-if="objlist.obj"
              action="#"
              :before-upload="handleBeforeUpload"
              :http-request="handleUpload"
              list-type="picture-card"
              :file-list="fileList"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            
            <!-- 显示已有图片 -->
            <div v-if="objlist.imgs && objlist.imgs.length > 0" class="existing-images">
              <el-image
                v-for="(img, index) in objlist.imgs"
                :key="index"
                :src="img.url || img.slt"
                fit="cover"
                style="width: 100px; height: 100px; margin: 8px;"
                :preview-src-list="objlist.imgs.map(item => item.url || item.slt)"
              />
            </div>
          </div>
        </el-card>

        <!-- 审批流程区域 - APP风格优化显示 -->
        <el-card v-if="objlist.shuzu_sp && objlist.shuzu_sp.length > 0" class="detail-card approval-process">
          <template #header>
            <div class="card-header">
              <span class="card-title">审批流程</span>
              <el-tag v-if="getCurrentApprovalStep()" :type="getJiedianztTagType(getCurrentApprovalStep().jiedianzt)" size="large">
                当前: {{ getJiedianztText(getCurrentApprovalStep().jiedianzt) }}
              </el-tag>
            </div>
          </template>
          
          <!-- APP风格的步骤显示 -->
          <div class="approval-steps">
            <div 
              v-for="(item, index) in objlist.shuzu_sp" 
              :key="index"
              class="approval-step"
              :class="{
                'step-completed': item.jiedianzt === 0,
                'step-pending': item.jiedianzt === 1,
                'step-processing': item.jiedianzt === 2,
                'step-current': isCurrentStep(item, index)
              }"
            >
              <!-- 步骤图标 -->
              <div class="step-icon">
                <div class="step-number" :class="getStepIconClass(item.jiedianzt)">
                  <el-icon v-if="item.jiedianzt === 0" class="step-check"><Check /></el-icon>
                  <el-icon v-else-if="item.jiedianzt === 2" class="step-processing"><Clock /></el-icon>
                  <span v-else class="step-index">{{ index + 1 }}</span>
                </div>
                <!-- 连接线 -->
                <div v-if="index < objlist.shuzu_sp.length - 1" class="step-line" :class="getStepLineClass(item.jiedianzt)"></div>
              </div>
              
              <!-- 步骤内容 -->
              <div class="step-content">
                <div class="step-header">
                  <h4 class="step-title">{{ item.jiedianmc || item.JieDian_WenZi }}</h4>
                  <el-tag :type="getJiedianztTagType(item.jiedianzt)" size="small">
                    {{ getJiedianztText(item.jiedianzt) }}
                  </el-tag>
                </div>
                
                <!-- 审批人员区域 -->
                <div v-if="item.shuzu_spr && item.shuzu_spr.length > 0" class="step-approvers">
                  <div class="approver-title">
                    <el-icon><User /></el-icon>
                    审批人：
                  </div>
                  <div class="approver-list">
                    <el-tag 
                      v-for="(item_spr, idx) in item.shuzu_spr" 
                      :key="idx"
                      :type="item_spr.zhuantai === 2 ? 'warning' : item_spr.zhuantai === 1 ? 'success' : 'info'"
                      class="approver-tag"
                      @click="PressSb(item_spr, item.jiedianbh)"
                    >
                      {{ item_spr.xingming || '审批人' }}
                      {{ item_spr.xianshi_zt }}
                      <span v-if="item_spr.cuiban" class="cuiban-text">{{ item_spr.cuiban }}</span>
                    </el-tag>
                  </div>
                </div>
                
                <!-- 评论记录区域 -->
                <div v-if="item.shuzu_pl && item.shuzu_pl.length > 0" class="step-comments">
                  <div class="comments-title">
                    <el-icon><ChatDotRound /></el-icon>
                    处理记录：
                  </div>
                  <div v-for="(item_pl, idx) in item.shuzu_pl" :key="idx" class="comment-item">
                    <div class="comment-header">
                      <span class="comment-user">{{ item_pl.xingming }}</span>
                      <span class="comment-time">{{ item_pl.shijian }}</span>
                    </div>
                    <div class="comment-content">{{ item_pl.neirong }}</div>
                    <div v-if="item_pl.imgs && item_pl.imgs.length > 0" class="comment-images">
                      <el-image 
                        v-for="(item_img, imgIdx) in item_pl.imgs" 
                        :key="imgIdx"
                        :src="item_img.slt" 
                        fit="cover"
                        style="width: 60px; height: 60px; margin-right: 8px;"
                        :preview-src-list="item_pl.imgs.map(img => img.slt)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 切换时间轴视图 -->
          <el-divider content-position="center">
            <el-button text @click="toggleTimelineView">
              {{ showTimeline ? '隐藏时间轴' : '显示时间轴' }}
            </el-button>
          </el-divider>
          
          <!-- 经典时间轴显示 -->
          <el-collapse-transition>
            <el-timeline v-show="showTimeline">
              <el-timeline-item
                v-for="(item, index) in objlist.shuzu_sp" 
                :key="index"
                :timestamp="item.JieDian_WenZi + ' - ' + (item.caozuo_sj || '等待处理')"
                :type="getTimelineType(item.jiedianzt)"
                placement="top"
              >
                <el-card>
                  <div class="approval-header">
                    <h4>{{ item.jiedianmc }}</h4>
                    <el-tag :type="getJiedianztTagType(item.jiedianzt)">
                      {{ getJiedianztText(item.jiedianzt) }}
                    </el-tag>
                  </div>
                  
                  <!-- 审批人员 - 完全按照uniapp的shuzu_spr结构 -->
                  <div v-if="item.shuzu_spr && item.shuzu_spr.length > 0" class="approver-section">
                    <div class="approver-title">审批人：</div>
                    <div class="approver-list">
                      <el-button 
                        v-for="(item_spr, idx) in item.shuzu_spr" 
                        :key="idx"
                        :type="item_spr.zhuantai === 2 ? 'warning' : item_spr.zhuantai === 1 ? 'success' : 'info'"
                        size="small"
                        @click="PressSb(item_spr, item.jiedianbh)"
                      >
                        {{ item_spr.xingming || '审批人' }}
                        {{ item_spr.xianshi_zt }}
                        <span v-if="item_spr.cuiban" class="cuiban-text">{{ item_spr.cuiban }}</span>
                      </el-button>
                    </div>
                  </div>
                  
                  <!-- 评论记录 - 完全按照uniapp的shuzu_pl结构 -->
                  <div v-if="item.shuzu_pl && item.shuzu_pl.length > 0" class="comments-section">
                    <div v-for="(item_pl, idx) in item.shuzu_pl" :key="idx" class="comment-item">
                      <div class="comment-header">
                        <span class="comment-user">{{ item_pl.xingming }}</span>
                        <span class="comment-time">{{ item_pl.shijian }}</span>
                      </div>
                      <div class="comment-content">{{ item_pl.neirong }}</div>
                      <div v-if="item_pl.imgs && item_pl.imgs.length > 0" class="comment-images">
                        <el-image 
                          v-for="(item_img, imgIdx) in item_pl.imgs" 
                          :key="imgIdx"
                          :src="item_img.slt" 
                          fit="cover"
                          style="width: 60px; height: 60px; margin-right: 8px;"
                          :preview-src-list="item_pl.imgs.map(img => img.slt)"
                        />
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-collapse-transition>
        </el-card>
      </div>

      <!-- 空状态 -->
      <el-empty v-else description="暂无数据" />
    </div>

    <!-- 底部操作按钮 - 完全按照uniapp的anlist结构 -->
    <div v-if="objlist.anlist && objlist.anlist.length > 0" class="bottom-actions">
      <!-- 更多按钮展开区域 -->
      <el-collapse-transition>
        <div v-show="Anshow" class="more-actions">
          <el-button-group>
            <el-button 
              v-for="(item, index) in objlist.gd_anlist || []" 
              :key="index"
              :type="getButtonType(item.ctype)"
              :icon="getButtonIcon(item.ctype)"
              @click="toUrl_pinglun(item)"
            >
              {{ item.biaoti }}
            </el-button>
          </el-button-group>
        </div>
      </el-collapse-transition>

      <!-- 主要按钮区域 -->
      <div class="main-actions">
        <el-button-group>
          <el-button 
            v-for="(item, index) in objlist.anlist" 
            :key="index"
            :type="getButtonType(item.ctype)"
            :icon="getButtonIcon(item.ctype)"
            @click="dialogClick(item)"
          >
            {{ item.biaoti }}
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 系统提醒弹窗 -->
    <el-dialog v-model="pressPoupVisible" title="操作选择" width="300px" append-to-body>
      <div class="dialog-actions">
        <el-button @click="reminder" type="primary" style="width: 100%; margin-bottom: 10px;">
          <el-icon><Bell /></el-icon>
          系统提醒
        </el-button>
        <el-button @click="handlePhone" type="success" style="width: 100%;">
          <el-icon><Phone /></el-icon>
          拨打电话
        </el-button>
      </div>
    </el-dialog>

    <!-- 确认对话框 -->
    <el-dialog v-model="btnPopupVisible" title="操作确认" width="400px" append-to-body>
      <div class="confirm-content">
        <el-icon class="warning-icon" color="#E6A23C"><Warning /></el-icon>
        <span>{{ dialogTxt }}</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelLogout">取消</el-button>
          <el-button type="primary" @click="logout">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 评论弹窗等等 -->
    <CommentDialog 
      v-model:visible="commentDialogVisible"
      :comment-data="commentData"
      @success="handleCommentSuccess"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Warning, Phone, CopyDocument, Bell, Plus, Check, Clock, User, ChatDotRound } from '@element-plus/icons-vue'
import request, { getApiPath } from '@/utils/request'
import { Base64 } from 'js-base64'
import CommentDialog from '@/components/CommentDialog.vue'

// 路由和状态管理
const route = useRoute()
const router = useRouter()

// 响应式数据 - 完全按照uniapp的data结构
const loading = ref(false)
const objlist = ref({
  hlist: [],
  zib_zd_list: { faid: 0, jllist: [], biaoti: '' },
  zib_tab_list: [],
  shuzu_sp: [],
  anlist: [],
  gd_anlist: [],
  orderlist: [0, 1, 2, 3],
  obj: {}
})

// 业务参数 - 完全按照uniapp的参数
const faid = ref(0)
const id = ref(0)
const cxlx = ref(0)
const liuchengbh = ref('')
const jk_faid = ref(0)
const jk_zdz = ref('')
const jk_zdm = ref('')

// 评论弹窗相关
const commentDialogVisible = ref(false)
const commentData = ref({})

// 弹窗状态
const pressPoupVisible = ref(false)
const btnPopupVisible = ref(false)
const Anshow = ref(false)

// 对话框数据
const dialogTxt = ref('')
const dialogObj = ref({})
const PressSbObj = ref({})

// 上传相关数据
const fileList = ref([])
const uploadOptions = ref({
  url: '',
  formData: {}
})

// APP风格审批流程相关状态
const showTimeline = ref(false)

// 页面标题
const pageTitle = computed(() => {
  // 优先使用 URL 中传递的动态标题
  if (route.query.title) {
    return decodeURIComponent(route.query.title)
  }
  
  // 其次使用数据中的标题
  if (objlist.value?.ckbiaoti) {
    return objlist.value.ckbiaoti
  }
  
  // 最后使用默认标题
  return '合同流程详情'
})

// 按钮类型映射
const getButtonType = (ctype) => {
  const typeMap = {
    'fanhui': 'default',
    'shouye': 'primary',
    'edit': 'warning',
    'tijiao': 'success',
    'pinglun': 'info',
    'biangeng': 'warning',
    'fuzhi': 'default',
    'shuaxin': 'primary',
    'gengduo': 'default'
  }
  return typeMap[ctype] || 'default'
}

// 按钮图标映射
const getButtonIcon = (ctype) => {
  const iconMap = {
    'fanhui': 'Back',
    'shouye': 'HomeFilled',
    'edit': 'Edit',
    'tijiao': 'Check',
    'pinglun': 'ChatDotRound',
    'biangeng': 'EditPen',
    'fuzhi': 'CopyDocument',
    'shuaxin': 'Refresh',
    'gengduo': 'More'
  }
  return iconMap[ctype] || ''
}

// 审批状态类型映射 - 完全按照uniapp的逻辑
const getTimelineType = (jiedianzt) => {
  // jiedianzt: 0-待处理, 1-已处理, 2-处理中, 3-已拒绝
  const typeMap = {
    0: 'info',    // 待处理 - 灰色
    1: 'success', // 已处理 - 绿色  
    2: 'warning', // 处理中 - 橙色
    3: 'danger'   // 已拒绝 - 红色
  }
  return typeMap[jiedianzt] || 'info'
}

// 状态标签类型映射 - 完全按照uniapp的逻辑
const getStatusTagType = (jiedianzt) => {
  const typeMap = {
    0: 'info',    // 待处理
    1: 'success', // 已处理
    2: 'warning', // 处理中
    3: 'danger'   // 已拒绝
  }
  return typeMap[jiedianzt] || 'info'
}

// 获取节点状态文本 - 根据您提供的状态值
const getJiedianztText = (jiedianzt) => {
  const textMap = {
    0: '已审批',    // jiedianzt: 0 已审批
    1: '未处理',    // jiedianzt: 1 未处理
    2: '待审批'     // jiedianzt: 2 待审批
  }
  return textMap[jiedianzt] || '未知状态'
}

// 获取节点状态标签类型 - 根据您的状态值调整颜色
const getJiedianztTagType = (jiedianzt) => {
  const typeMap = {
    0: 'success',  // 已审批 - 绿色
    1: 'info',     // 未处理 - 灰色
    2: 'warning'   // 待审批 - 橙色
  }
  return typeMap[jiedianzt] || 'info'
}

// APP风格审批流程显示相关方法
const toggleTimelineView = () => {
  showTimeline.value = !showTimeline.value
}

// 获取当前审批步骤
const getCurrentApprovalStep = () => {
  if (!objlist.value.shuzu_sp || objlist.value.shuzu_sp.length === 0) return null
  
  // 查找当前正在处理的步骤（jiedianzt=2待审批或jiedianzt=1未处理）
  const currentStep = objlist.value.shuzu_sp.find(item => item.jiedianzt === 2 || item.jiedianzt === 1)
  return currentStep || objlist.value.shuzu_sp[objlist.value.shuzu_sp.length - 1]
}

// 判断是否为当前步骤
const isCurrentStep = (item, index) => {
  if (!objlist.value.shuzu_sp || objlist.value.shuzu_sp.length === 0) return false
  
  // 如果当前步骤是待审批或未处理，则高亮显示
  if (item.jiedianzt === 2 || item.jiedianzt === 1) return true
  
  // 如果所有步骤都已完成，高亮最后一个步骤
  const allCompleted = objlist.value.shuzu_sp.every(step => step.jiedianzt === 0)
  if (allCompleted && index === objlist.value.shuzu_sp.length - 1) return true
  
  return false
}

// 获取步骤图标样式类
const getStepIconClass = (jiedianzt) => {
  const classMap = {
    0: 'icon-completed',    // 已审批 - 绿色背景
    1: 'icon-pending',      // 未处理 - 灰色背景
    2: 'icon-processing'    // 待审批 - 橙色背景
  }
  return classMap[jiedianzt] || 'icon-pending'
}

// 获取步骤连接线样式类
const getStepLineClass = (jiedianzt) => {
  const classMap = {
    0: 'line-completed',    // 已审批 - 绿色连接线
    1: 'line-pending',      // 未处理 - 灰色连接线
    2: 'line-processing'    // 待审批 - 橙色连接线
  }
  return classMap[jiedianzt] || 'line-pending'
}

// 状态文本映射 - 完全按照uniapp的逻辑
const getStatusText = (jiedianzt) => {
  const textMap = {
    0: '待处理',
    1: '已处理',
    2: '处理中',
    3: '已拒绝'
  }
  return textMap[jiedianzt] || '未知状态'
}

// 完全按照uniapp的方法实现
const makephone = (phoneNumber) => {
  window.open(`tel:${phoneNumber}`)
  ElMessage.success(`拨打电话: ${phoneNumber}`)
}

const handleCopy = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

// 上传相关方法 - 对应uniapp的上传逻辑
const handleBeforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!')
    return false
  }
  return true
}

const handleUpload = async (options) => {
  const formData = new FormData()
  formData.append('file', options.file)
  formData.append('id', objlist.value.obj?.id || id.value)
  formData.append('faid', faid.value)
  
  try {
    // 这里使用您的上传API
    const uploadUrl = uploadOptions.value.url || `${localStorage.getItem('yuming') || ''}/xcx/ajax/imgUpload_zj.ashx`
    
    const res = await request.post(uploadUrl, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success('上传成功')
      // 重新获取数据
      await getShuju()
    } else {
      ElMessage.error('上传失败')
    }
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败')
  }
}

// 完全按照uniapp的getShuju方法
const getShuju = async () => {
  try {
    loading.value = true
    console.log('=== 开始获取数据 (uniapp风格) ===')
    
    // 完全按照uniapp的bs64_cs构建
    const bs64_cs = {
      dtype: '',
      id: id.value,
      qiyebh: '',
      key: '',
      cxlx: cxlx.value,
      yewuy: localStorage.getItem('username') || '常露',
      img_is_zj: 0,
      openid: localStorage.getItem('openid') || "17524180246839845722",
      liuchengbh: liuchengbh.value
    }
    
    const cs = {
      ctype: 'app_zlxt_xq',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value,
      jk_faid: jk_faid.value,
      jk_zdz: jk_zdz.value,
      jk_zdm: jk_zdm.value
    }
    
    // 特殊URL处理（与uniapp一致）
    let apiUrl = undefined
    if (bs64_cs.cxlx === 901 || bs64_cs.cxlx === 902) {
      apiUrl = 'https://fdddzq.haozskj.com/xcx/ajax/Ajax_apppost.ashx'
    }
    
    console.log('发送详情请求参数 (uniapp风格):', cs)
    console.log('详情bs64_cs解码 (uniapp风格):', bs64_cs)
    
    const res = await request.post(apiUrl || getApiPath(cs.ctype), { canshu: cs })
    console.log('详情数据响应:', res)
    
    if (res && res.leixing === 'ok') {
      objlist.value = res
      
      // 设置页面标题
      if (res.ckbiaoti) {
        document.title = res.ckbiaoti
      }
      
      console.log('uniapp风格详情页数据获取成功:', res)
    } else {
      ElMessage.error(res?.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 完全按照uniapp的toUrl_edit方法
const toUrl_edit = (item, faidParam) => {
  if (item.ctype === 'topage') {
    if (item.jk_type.indexOf('edit') > -1) {
      const editUrl = `/business/hetonglcxq_edit/hetonglcxq_edit`
      
      // 生成唯一的tabId用于编辑页面
      const tabId = `edit_${objlist.value.obj?.id || id.value}_${Date.now()}`
      
      // 生成动态标题
      const dynamicTitle = `编辑${item.biaoti || pageTitle.value || '数据'}`
      
      const editParams = {
        faid: faidParam,
        jk_faid: item.an_faid,
        cxlx: cxlx.value,
        id: objlist.value.obj?.id || id.value,
        dtype: 'edit',
        tabId: tabId,
        title: encodeURIComponent(dynamicTitle)
      }
      router.push({ path: editUrl, query: editParams })
    } else if (item.jk_type.indexOf('xq') > -1) {
      const detailUrl = `/business/hetonglcxq/hetonglcxq`
      
      // 生成唯一的tabId用于详情页面
      const tabId = `detail_${objlist.value.obj?.id || id.value}_${Date.now()}`
      
      // 生成动态标题
      const dynamicTitle = `${item.biaoti || pageTitle.value || '数据'}详情`
      
      const detailParams = {
        faid: faid.value,
        jk_faid: item.an_faid,
        cxlx: cxlx.value,
        jk_zdz: objlist.value.obj?.[item.jk_zdm] || '',
        jk_zdm: item.jk_zdm,
        tabId: tabId,
        title: encodeURIComponent(dynamicTitle)
      }
      router.push({ path: detailUrl, query: detailParams })
    } else if (item.jk_type.indexOf('lb') > -1) {
      const listUrl = `/business/hetonglclb/hetonglclb`
      const listParams = {
        faid: faidParam,
        jk_faid: item.an_faid,
        cxlx: cxlx.value
      }
      router.push({ path: listUrl, query: listParams })
    }
  } else {
    const editUrl = `/business/hetonglcxq_edit/hetonglcxq_edit`
    
    // 生成唯一的tabId用于编辑页面
    const tabId = `edit_${objlist.value.obj?.id || id.value}_${Date.now()}`
    
    // 生成动态标题
    const dynamicTitle = `编辑${item.biaoti || pageTitle.value || '数据'}`
    
    const editParams = {
      faid: faidParam,
      jk_faid: item.an_faid,
      cxlx: cxlx.value,
      id: objlist.value.obj?.id || id.value,
      dtype: 'edit',
      tabId: tabId,
      title: encodeURIComponent(dynamicTitle)
    }
    router.push({ path: editUrl, query: editParams })
  }
}

// 完全按照uniapp的liucheng_tijiao方法
const liucheng_tijiao = async () => {
  try {
    const bs64_cs = {
      id: objlist.value.obj?.id || id.value,
      liuchengbh: objlist.value.obj?.liuchengbh || liuchengbh.value,
      liuchengzxbh: objlist.value.obj?.liuchengzxbh || '',
      jiedianbh: objlist.value.obj?.liuchengzxjdbh || '',
      pinglunlx: 0,
      banliren: '',
      pinglun: '发布成功',
      openid: localStorage.getItem('openid') || "17524180246839845722"
    }
    
    const cs = {
      ctype: 'app_pinglun_save',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: 0
    }
    
    const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      await getShuju()
      ElMessage.success('提交成功')
    } else {
      ElMessage.error(res?.msg || '提交失败')
    }
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败')
  }
}

// 完全按照uniapp的dialogClick方法
const dialogClick = (item) => {
  console.log('测试', item)
  if (item.querents && item.querents.length > 0) {
    dialogTxt.value = item.querents
    dialogObj.value = item
    btnPopupVisible.value = true
  } else {
    toUrl_pinglun(item)
  }
}

const logout = () => {
  btnPopupVisible.value = false
  toUrl_pinglun(dialogObj.value)
}

const cancelLogout = () => {
  btnPopupVisible.value = false
}

// 完全按照uniapp的copyinfo方法
const copyinfo = async (item) => {
  try {
    const bs64_cs = {
      id: objlist.value.obj?.id || id.value,
      openid: localStorage.getItem('openid') || "17524180246839845722"
    }
    
    const cs = {
      ctype: item.ctype,
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success(res.msg || '复制成功')
      if (item.wc_fanhui > 0) {
        setTimeout(() => {
          router.back()
        }, 2000)
      }
    } else {
      ElMessage.error(res?.msg || '复制失败')
    }
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败')
  }
}

// 完全按照uniapp的toUrl_pinglun方法 - 这是核心的按钮处理逻辑
const toUrl_pinglun = async (item) => {
  console.log('uniapp风格按钮处理:', item)
  
  if (item.jiaoyan) {
    // 需要校验的按钮
    const bs64_cs = {
      ctype: item.ctype,
      jk_type: item.jk_type,
      pinglunlx: item.pinglunlx
    }
    
    const cs = {
      ctype: 'app_zlxt_jiaoyan',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    try {
      const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
      if (res && res.leixing === 'ok') {
        executeButtonAction(item)
      } else {
        ElMessage.error(res?.msg || '校验失败')
        return
      }
    } catch (error) {
      console.error('校验失败:', error)
      ElMessage.error('校验失败')
      return
    }
  } else {
    executeButtonAction(item)
  }
}

// 执行具体的按钮动作
const executeButtonAction = (item) => {
  switch (item.ctype) {
    case "fanhui":
      Anshow.value = false
      router.back()
      break
    case "shouye":
      Anshow.value = false
      router.push('/')
      break
    case "edit":
      Anshow.value = false
      toUrl_edit(item, faid.value)
      break
    case "topage":
      Anshow.value = false
      toUrl_edit(item, item.an_faid)
      break
    case "pinglun":
      Anshow.value = false
      // 显示评论弹窗而不是跳转页面
      showCommentDialog(item.pinglunlx)
      break
    case "tijiao":
      Anshow.value = false
      liucheng_tijiao()
      break
    case "biangeng":
      Anshow.value = false
      biangeDianziq()
      break
    case "fuzhi":
      Anshow.value = false
      copyinfo(item)
      break
    case "dzq_shengcheng":
      Anshow.value = false
      saveDianziq()
      break
    case "dzq_yulan":
      Anshow.value = false
      downOpenFile(item.url)
      break
    case "wancheng_httj":
    case "jiedan_httj":
    case "tongyi_httj":
      Anshow.value = false
      Httj(item)
      break
    case "dzq_faqi":
      Anshow.value = false
      faqiDianziq()
      break
    case "dzq_chakan":
    case "dzq_chakan_dzq":
      Anshow.value = false
      chakanDianziq(item)
      break
    case "dzq_cuiban":
      Anshow.value = false
      hzsErr('fdd_huoqu_cuiban_qianshurenwu')
      break
    case "dzq_zuofei":
      Anshow.value = false
      cancellation()
      break
    case "dzq_huoqulianjie":
      Anshow.value = false
      hzsErr('fdd_hq_qsrwcyfzslj_all')
      break
    case "dzq_shengcheng_gdg_grqs_grtt":
    case "dzq_shengcheng_gdg_grqs":
      Anshow.value = false
      gdg_grqs(item.ctype)
      break
    case "shuaxin":
      Anshow.value = false
      ElMessage.success('刷新成功')
      getShuju()
      break
    case "gengduo":
      Anshow.value = !Anshow.value
      break
    default:
      console.log('未处理的按钮类型:', item.ctype)
      ElMessage.info(`执行操作: ${item.biaoti}`)
  }
}

// 其他uniapp方法的实现
const gopinglun = (pinglunlx) => {
  const pinglunParams = {
    gobacklx: 0,
    id: objlist.value.obj?.id || id.value,
    pinglunlx: pinglunlx,
    liuchengbh: objlist.value.obj?.liuchengbh || liuchengbh.value,
    liuchengzxbh: objlist.value.obj?.liuchengzxbh || '',
    jiedianbh: objlist.value.obj?.liuchengzxjdbh || '',
    faid: faid.value
  }
  
  const cs = encodeURIComponent(JSON.stringify(pinglunParams))
  console.log('跳转评论页面参数:', cs)
  ElMessage.info(`评论功能 - 参数: ${cs}`)
}

// 显示评论弹窗
const showCommentDialog = (pinglunlx) => {
  commentData.value = {
    gobacklx: 0,
    id: objlist.value.obj?.id || id.value,
    pinglunlx: pinglunlx,
    liuchengbh: objlist.value.obj?.liuchengbh || liuchengbh.value,
    liuchengzxbh: objlist.value.obj?.liuchengzxbh || '',
    jiedianbh: objlist.value.obj?.liuchengzxjdbh || '',
    faid: faid.value
  }
  commentDialogVisible.value = true
}

// 评论提交成功后的回调
const handleCommentSuccess = () => {
  ElMessage.success('评论提交成功')
  // 重新获取数据以更新页面状态
  getShuju()
}

const Httj = async (item) => {
  try {
    const bs64_cs = {
      pinglun: item.biaoti,
      banliren: '',
      pinglunlx: item.pinglunlx,
      id: objlist.value.obj?.id || id.value,
      openid: localStorage.getItem('openid') || "17524180246839845722",
      liuchengbh: objlist.value.obj?.liuchengbh || liuchengbh.value,
      liuchengzxbh: objlist.value.obj?.liuchengzxbh || '',
      jiedianbh: objlist.value.obj?.liuchengzxjdbh || ''
    }
    
    const cs = {
      ctype: item.ctype,
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success('成功')
      setTimeout(() => {
        getShuju()
      }, 3000)
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败')
  }
}

const hzsErr = async (neirong) => {
  try {
    const bs64_cs = {
      liuchengzxbh: objlist.value.obj?.wenjianbh || '',
      wenjianbh: objlist.value.obj?.wenjianbh || '',
      signtaskid: objlist.value.obj?.signtaskid || ''
    }
    
    const cs = {
      ctype: neirong,
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      getShuju()
      ElMessage.success('操作成功')
    } else {
      ElMessage.error(res?.msg || '操作失败')
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败')
  }
}

const biangeDianziq = async () => {
  try {
    const bs64_cs = {
      id: objlist.value.obj?.id || id.value,
      openid: localStorage.getItem('openid') || "17524180246839845722"
    }
    
    const cs = {
      ctype: 'app_zlxt_xq_biangen',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      getShuju()
      ElMessage.success('变更成功')
    } else {
      ElMessage.error(res?.msg || '变更失败')
    }
  } catch (error) {
    console.error('变更失败:', error)
    ElMessage.error('变更失败')
  }
}

const toUrl_xq = (item) => {
  // 根据uniapp原版的跳转逻辑修改
  if (item.faid && item.id) {
    // 如果有faid和id，跳转到对应的详情页
    
    // 生成唯一的tabId
    const tabId = `detail_${item.id}_${Date.now()}`
    
    // 生成动态标题
    let dynamicTitle = '详情'
    if (item.dbiaoti) {
      dynamicTitle = `${item.dbiaoti}详情`
    } else if (item.biaoti) {
      dynamicTitle = `${item.biaoti}详情`
    }
    
    const detailParams = {
      faid: item.faid,
      id: item.id,
      tabId: tabId,
      title: encodeURIComponent(dynamicTitle)
    }
    router.push({ path: '/zulinxt/zlbxq/zlbxq', query: detailParams })
  } else {
    // 否则跳转到当前页面类型的详情
    
    // 生成唯一的tabId
    const tabId = `detail_${item.id}_${Date.now()}`
    
    // 生成动态标题
    let dynamicTitle = '详情'
    if (item.dbiaoti) {
      dynamicTitle = `${item.dbiaoti}详情`
    } else if (item.biaoti) {
      dynamicTitle = `${item.biaoti}详情`
    }
    
    const detailParams = {
      faid: item.faid || faid.value,
      id: item.id,
      tabId: tabId,
      title: encodeURIComponent(dynamicTitle)
    }
    router.push({ path: '/business/hetonglcxq/hetonglcxq', query: detailParams })
  }
}

const saveDianziq = async () => {
  try {
    const bs64_cs = {
      hetongbh: objlist.value.obj?.liuchengzxbh || '',
      xulieh: localStorage.getItem('xulieh') || ''
    }
    
    const cs = {
      ctype: 'xcx_3_save_dianziht',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: Base64.encode(JSON.stringify(objlist.value.dzht_obj || {})),
      bs64_list: Base64.encode(JSON.stringify(objlist.value.shuzu_dzhtsb || [])),
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success('生成成功')
      setTimeout(() => {
        getShuju()
      }, 3000)
    }
  } catch (error) {
    console.error('生成失败:', error)
    ElMessage.error('生成失败')
  }
}

const gdg_grqs = async (ctype) => {
  try {
    const bs64_cs = {
      hetongbh: objlist.value.obj?.liuchengzxbh || '',
      xulieh: localStorage.getItem('xulieh') || ''
    }
    
    const cs = {
      ctype: ctype,
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: Base64.encode(JSON.stringify(objlist.value.dzht_obj || {})),
      bs64_list: Base64.encode(JSON.stringify(objlist.value.shuzu_dzhtsb || [])),
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success('生成成功')
      setTimeout(() => {
        getShuju()
      }, 3000)
    }
  } catch (error) {
    console.error('生成失败:', error)
    ElMessage.error('生成失败')
  }
}

const chakanDianziq = (item) => {
  if (item.url && item.url.length > 0) {
    downOpenFile(item.url)
  } else {
    xiazaiDianziht(item)
  }
}

const xiazaiDianziht = async (item) => {
  try {
    const bs64_cs = {
      liuchengzxbh: item.ctype === 'dzq_chakan' 
        ? objlist.value.dzht_obj?.wenjianbh || '' 
        : objlist.value.obj?.wenjianbh || ''
    }
    
    const cs = {
      ctype: 'fdd_huoqu_qianshuwendangxiazaidizhi_xcx',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
    
    if (res && res.xiazaidz) {
      item.url = res.xiazaidz
      downOpenFile(res.xiazaidz)
    }
  } catch (error) {
    console.error('获取下载地址失败:', error)
    ElMessage.error('获取下载地址失败')
  }
}

const faqiDianziq = async () => {
  try {
    const bs64_cs = {
      liuchengzxbh: objlist.value.dzht_obj?.wenjianbh || '',
      xulieh: localStorage.getItem('xulieh') || ''
    }
    
    const cs = {
      ctype: 'xcx_3_faqi_dianziqian',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success('发起成功')
      setTimeout(() => {
        getShuju()
      }, 3000)
    }
  } catch (error) {
    console.error('发起失败:', error)
    ElMessage.error('发起失败')
  }
}

const cancellation = async () => {
  try {
    const bs64_cs = {
      liuchengzxbh: objlist.value.obj?.wenjianbh || '',
      wenjianbh: objlist.value.obj?.wenjianbh || '',
      signtaskid: objlist.value.obj?.signtaskid || ''
    }
    
    const cs = {
      ctype: 'xcx_3_chexiao_dianziht',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post('https://fdddzq.haozskj.com/xcx/ajax/Ajax_fadadapost.ashx', { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success('作废成功')
      setTimeout(() => {
        getShuju()
      }, 3000)
    }
  } catch (error) {
    console.error('作废失败:', error)
    ElMessage.error('作废失败')
  }
}

const downOpenFile = (url) => {
  if (url && url.length > 10) {
    window.open(url, '_blank')
    ElMessage.success('正在打开文件')
  }
}

// 完全按照uniapp的PressSb方法
const PressSb = (item, jiedianbh) => {
  console.log('点击审批人:', item, jiedianbh)
  
  // 只有当 zhuantai === 2 (处理中) 时才能操作
  if (item.zhuantai === 2) {
    PressSbObj.value = {
      shuzu_spr: item,
      jiedianbh: jiedianbh
    }
    pressPoupVisible.value = true
  } else {
    // 其他状态不能操作，可以显示提示
    if (item.zhuantai === 1) {
      ElMessage.info('该审批人已处理完成')
    } else if (item.zhuantai === 0) {
      ElMessage.info('该审批人暂未开始处理')
    }
  }
}

// 系统提醒 - 完全按照uniapp的reminder方法
const reminder = async () => {
  pressPoupVisible.value = false
  
  try {
    const bs64_cs = {
      liuchengzxbh: objlist.value.obj?.liuchengzxbh || '',
      jiedianbh: objlist.value.obj?.liuchengzxjdbh || '',
      liuchengbh: objlist.value.obj?.liuchengbh || '',
      openid: localStorage.getItem('openid') || "17524180246839845722",
      pinglun: "催办",
      banliren: PressSbObj.value.shuzu_spr?.xingming || '',
      pinglunlx: 0,
      id: objlist.value.obj?.id || id.value
    }
    
    const cs = {
      ctype: 'lc_cuiban',
      bs64_cs: Base64.encode(JSON.stringify(bs64_cs)),
      bs64_obj: '',
      bs64_list: '',
      ids: '',
      faid: faid.value
    }
    
    const res = await request.post(getApiPath(cs.ctype), { canshu: cs })
    
    if (res && res.leixing === 'ok') {
      ElMessage.success('已催办')
    } else {
      ElMessage.error(res?.msg || '催办失败')
    }
  } catch (error) {
    console.error('催办失败:', error)
    ElMessage.error('催办失败')
  }
}

// 拨打电话 - 完全按照uniapp的Phone方法
const handlePhone = () => {
  pressPoupVisible.value = false
  const phoneNumber = PressSbObj.value.shuzu_spr?.shouji
  if (phoneNumber) {
    makephone(phoneNumber)
  } else {
    ElMessage.warning('该审批人未设置电话号码')
  }
}

// 完全按照uniapp的onLoad逻辑处理参数
onMounted(async () => {
  console.log('=== 合同流程详情页面初始化 (uniapp风格) ===')
  
  // 初始化上传配置
  uploadOptions.value.url = `${localStorage.getItem('yuming') || ''}/xcx/ajax/imgUpload_zj.ashx`
  
  await initializePageData()
})

// 监听路由参数变化，当从一个详情页跳转到另一个详情页时重新获取数据
watch(
  () => route.query,
  async (newQuery, oldQuery) => {
    // 只有当关键参数发生变化时才重新加载
    const keyParams = ['faid', 'id', 'cxlx', 'liuchengbh', 'jk_faid', 'jk_zdz', 'jk_zdm', 'cs']
    const hasKeyParamChanged = keyParams.some(key => newQuery[key] !== oldQuery[key])
    
    if (hasKeyParamChanged) {
      console.log('=== 路由参数变化，重新获取数据 ===')
      console.log('新参数:', newQuery)
      console.log('旧参数:', oldQuery)
      
      await initializePageData()
    }
  },
  { deep: true }
)

// 将参数初始化逻辑抽取为独立方法
const initializePageData = async () => {
  // 完全按照uniapp的onLoad逻辑处理参数
  let options = { ...route.query }
  console.log('uniapp风格详情页onLoad参数:', options)
  
  // 检查是否有cs参数（与uniapp的onLoad一致）
  if (options.cs) {
    try {
      const csParams = JSON.parse(decodeURIComponent(options.cs))
      console.log('解析cs参数:', csParams)
      if (csParams.id) id.value = Number(csParams.id)
      if (csParams.faid) faid.value = Number(csParams.faid)
      if (csParams.cxlx) cxlx.value = Number(csParams.cxlx)
      if (csParams.liuchengbh !== undefined) liuchengbh.value = csParams.liuchengbh
    } catch (error) {
      console.error('解析cs参数失败:', error)
    }
  }
  
  // 从直接URL参数获取（与uniapp onLoad逻辑一致）
  if (options.faid) faid.value = Number(options.faid)
  if (options.cxlx) cxlx.value = Number(options.cxlx)
  if (options.liuchengbh !== undefined) liuchengbh.value = options.liuchengbh
  if (options.id) id.value = Number(options.id)
  if (options.jk_faid) jk_faid.value = Number(options.jk_faid)
  if (options.jk_zdz) jk_zdz.value = options.jk_zdz
  if (options.jk_zdm) jk_zdm.value = options.jk_zdm
  
  // 设置默认值（与uniapp保持一致）
  if (!faid.value) faid.value = 560602715
  if (!cxlx.value) cxlx.value = 101
  
  console.log('uniapp风格详情参数:', { 
    faid: faid.value,
    id: id.value,
    cxlx: cxlx.value,
    liuchengbh: liuchengbh.value,
    jk_faid: jk_faid.value,
    jk_zdz: jk_zdz.value,
    jk_zdm: jk_zdm.value
  })
  
  await getShuju()
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100px;
}

.page-header {
  background: white;
  padding: 16px 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-content {
  padding: 0 24px;
}

.loading-wrapper {
  background: white;
  border-radius: 8px;
  padding: 24px;
}

.detail-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.content-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-table {
  width: 100%;
}

.detail-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  min-height: 50px;
}

.detail-label {
  width: 200px;
  padding: 12px 16px;
  background-color: #fafafa;
  font-weight: 600;
  color: #303133;
  border-right: 1px solid #ebeef5;
  display: flex;
  align-items: center;
}

.detail-content {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #606266;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.upload-section {
  padding: 16px 0;
}

.existing-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.device-list,
.tab-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.device-item,
.tab-item {
  cursor: pointer;
  transition: transform 0.2s;
}

.device-item:hover,
.tab-item:hover {
  transform: translateY(-2px);
}

.device-title,
.tab-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.device-info,
.tab-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

.approval-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.approval-header h4 {
  margin: 0;
  color: #303133;
}

.approver-section {
  margin-bottom: 16px;
}

.approver-title {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 8px;
}

.approver-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.comments-section {
  border-top: 1px solid #ebeef5;
  padding-top: 16px;
}

.comment-item {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 6px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-user {
  font-weight: 600;
  color: #303133;
}

.comment-time {
  color: #909399;
  font-size: 12px;
}

.comment-content {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 8px;
}

.comment-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 16px 24px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.more-actions {
  margin-bottom: 16px;
}

.main-actions {
  display: flex;
  justify-content: center;
}

.dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.confirm-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}

.warning-icon {
  font-size: 20px;
}

/* 审批流程相关样式 */
.approval-process {
  margin-bottom: 20px;
}

.approval-steps {
  padding: 20px 0;
}

.approval-step {
  display: flex;
  position: relative;
  padding-bottom: 30px;
}

.approval-step:last-child {
  padding-bottom: 0;
}

.step-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  position: relative;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  color: white;
  z-index: 2;
  position: relative;
}

.icon-completed {
  background: #67c23a;
  border: 2px solid #67c23a;
}

.icon-processing {
  background: #e6a23c;
  border: 2px solid #e6a23c;
  animation: pulse 2s infinite;
}

.icon-pending {
  background: #909399;
  border: 2px solid #909399;
}

.step-check,
.step-processing {
  font-size: 16px;
}

.step-index {
  font-size: 12px;
}

.step-line {
  width: 2px;
  height: 40px;
  margin-top: 5px;
  position: absolute;
  top: 32px;
  left: 15px;
}

.line-completed {
  background: #67c23a;
}

.line-processing {
  background: #e6a23c;
}

.line-pending {
  background: #dcdfe6;
}

.step-content {
  flex: 1;
  min-width: 0;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.step-current .step-title {
  color: #409eff;
}

.step-completed .step-title {
  color: #67c23a;
}

.step-processing .step-title {
  color: #e6a23c;
}

.step-approvers {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.approver-title,
.comments-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
}

.approver-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.approver-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.approver-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.step-comments {
  margin-top: 16px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
  border-left: 3px solid #909399;
}

.comment-item {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.comment-item:last-child {
  margin-bottom: 0;
}

/* APP风格动画效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(230, 162, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0);
  }
}

.step-current {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 8px;
  padding: 16px;
  margin: -8px;
  border: 1px solid #bae6fd;
}

.step-completed {
  opacity: 0.8;
}

.approver-list .el-button {
  margin-right: 8px;
  margin-bottom: 8px;
}

.cuiban-text {
  color: #f56c6c;
  font-weight: bold;
}

.approval-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.approval-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.approver-section {
  margin-bottom: 16px;
}

.approver-title {
  font-weight: 500;
  margin-bottom: 8px;
  color: #666;
}

.comments-section {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.comment-item {
  margin-bottom: 12px;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 4px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
}

.comment-user {
  font-weight: 500;
  color: #333;
}

.comment-time {
  color: #999;
}

.comment-content {
  color: #666;
  line-height: 1.4;
}

.comment-images {
  margin-top: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-content {
    padding: 0 16px;
  }
  
  .page-header {
    padding: 12px 16px;
  }
  
  .bottom-actions {
    padding: 12px 16px;
  }
  
  .device-list,
  .tab-list {
    grid-template-columns: 1fr;
  }
  
  .approver-list {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
